<template>
  <div class="futre-weather">
    <h3>最后更新时间：{{ updateTime }}</h3>
    <div class="chart" ref="chart"></div>
  </div>
</template>

<script>
import axios from 'axios';
import * as echarts from 'echarts/core';
import { GridComponent } from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import dayjs from 'dayjs';
import {key, api_24h} from '../common/constrant'

echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);

export default{
  data(){
    return{
      hourly:[],
      xTime:[],
      yDate:[],
      updateTime:"",
    }
  },

  computed:{
    location:function(){
      return this.$store.state.location.id
    }
  },

  methods:{
    getDate(){
      axios.get(api_24h,{
        params:{
          location:this.location,
          // location: this.$store.state.location.id,
          key:key,
        },
      }).then((res) => {
        // console.log(res.data)
        // console.log(this.$store.state.location[0].id)
        this.xTime = []
        this.yDate = []
        this.updateTime = dayjs(res.data.updateTime).format("YYYY-MM-DD HH:mm:ss")
        this.hourly = res.data.hourly
        this.hourly.forEach(element => {
          this.xTime.push(element.fxTime)
          this.yDate.push(element.temp)
        });

        // let fixHH = []
        // this.xTime.forEach(element => {
        //   fixHH.push(dayjs(element).format('HH:mm'))
        // }),

        this.loadeEcharts(this.xTime.map((el) => dayjs(el).format("HH:mm")), this.yDate);
      })
    },

    loadeEcharts(x,date){
      var myChart = echarts.init(this.$refs.chart);
      var option;
      option = {
        xAxis:{
          type:"category",
          data:x,
        },
        yAxis:{
          type:"value",
        },
        series:[
          {
            data:date,
            type:'line',
          }
        ]
      }
      option && myChart.setOption(option);
    },
  },

  mounted(){
    this.getDate();
  },

  watch:{
    location:function(){
      this.getDate();
    }
  },

};
</script>

<style>
  .chart{
    height: 20rem
  }
</style>